<template>
  <div class="aoto">
    <el-row class="header_top">
      <el-col :span="12" class="height_gao">
        <div class="grid-content bg-purple  height_gao">

          <el-button type="primary" class="subangffefnlei" plain @click="addclass(1)">添加一级分类</el-button>
          <el-button type="success" class="subangffefnlei" plain @click="addclass(2)">添加二级分类</el-button>
        </div>
      </el-col>
      <el-col :span="12" class="height_gao">
        <div class="grid-content bg-purple-light height_gao">
        </div>
      </el-col>
    </el-row>

    <div class="autd animated slideInRight">
      <el-table :data="datatitle" style="width: 100%" v-loading="loading2" element-loading-text="拼命加载中" ref="profile"
                class=''>

        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.parent_class" style="width: 100%;float:left;" v-loading="loading2"
                      element-loading-text="拼命加载中">
              <el-table-column prop="id" label="ID" width="100">
              </el-table-column>
              <el-table-column prop="class_name" label="二级分类 " width="150">
              </el-table-column>
              <el-table-column prop="price" label="分类图片" width="200">
                <template slot-scope="scope">
                  <img :src="yuming+scope.row.picture" class="img_fenlei"/>
                </template>
              </el-table-column>
              <el-table-column label="修改" width="100">
                <el-button type="primary">主要按钮</el-button>
                <template slot-scope="scope">
                  <el-button @click="updateclass(scope.row,2)" type="warning" plain>修改</el-button>
                </template>
              </el-table-column>
              <el-table-column label="修改" width="100">
                <template slot-scope="scope">
                  <el-button @click="deleteclass(scope.row,scope.$index,2)" type="danger" plain>删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>


        <el-table-column prop="id" label="ID" width="180">
        </el-table-column>
        <el-table-column prop="class_name" label="分类名称" width="150">
        </el-table-column>
        <el-table-column prop="price" label="分类图片" width="200">
          <template slot-scope="scope">
            <img :src="yuming+scope.row.picture " class="img_fenlei"/>
          </template>
        </el-table-column>
        <el-table-column label="修改" width="100">
          <el-button type="primary">主要按钮</el-button>
          <template slot-scope="scope">
            <el-button @click="updateclass(scope.row,1)" type="warning" plain>修改</el-button>
          </template>
        </el-table-column>
        <el-table-column label="修改" width="100">
          <template slot-scope="scope">
            <el-button @click="deleteclass(scope.row,scope.$index,1)" type="danger" plain>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="cur"
        :page-size="pagesize"
        :page-count="currentPage4"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <el-dialog
      title="操作"
      :visible.sync="dateadvertisement"
      width="30%">
      <span>是否删除--{{imgtext}}--该分类</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dateadvertisement = false">取 消</el-button>
    <el-button type="primary" @click="submitimg">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog :title="fentitle" :visible.sync="dialogFormVisible">
      <el-form :model="form" class="el_class" v-if="table_ == true">
        <el-form-item label="一级分类" :label-width="formLabelWidth" v-if="classa == true">
          <el-select v-model="classvalue" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.class_name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" class="classname" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类排序" :label-width="formLabelWidth">
          <el-input v-model="form.sort" type="number" class="classname" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <el-form class="el_class" v-if="table_ == false">
        <form :action='urlimg+addclass_' id="aasd" method="post" enctype="multipart/form-data" target="id_iframe">
          <el-form-item label="分类缩略图" :label-width="formLabelWidth">
            <img :src="aimg" ref="img_" alt="" class="el_img"/>
            <input name="classid" :value="gdid" style=" display: none"/>
            <input ref="list" @change="onFileChange($event)" type='file' name="picture" accept='image/jpeg image/x-png'
                   class=" pic_add"/>
          </el-form-item>
          <button type="submit" class="ll_button" @click="submitclassimg"> 确 定</button>
        </form>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="submitbutton == true">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button @click="submitclass" type="primary">确 定</el-button>
      </div>
      <iframe id="id_iframe" name="id_iframe" style="display:none;"></iframe>
    </el-dialog>

    <el-dialog title="修改商品分类" :visible.sync="update_class">
      <el-form :model="class_update">
        <el-form-item label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="class_update.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类排序" :label-width="formLabelWidth">
          <el-input v-model="class_update.sort" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="update_class = false">取 消</el-button>
        <el-button type="primary" @click="updateclassname">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import  img from  "~/timg.jpg";
  export default {
    components: {},
    data() {
      return {
        update_class: false,
        dateadvertisement: false,
        class_update: {
          name: '',
          sort: 0,
          eid: 0,
          pid: 0,
          level: 0,
        },
        table_: true,
        classa: false,
        salesman: '',//业务员
        pagesize: this.$store.state.attribute.page, //每页条数
        urlimg: this.$DN,
        yuming: this.$IMG,
        addclass_: 'uploadclassimg?Authorization='+this.$store.state.attribute.token, //api 路由
        total: 1, //总条数
        currentPage4: 1, //总页数
        cur: 1, //当前页数
        loading2: true,
        Temporary: [],  //总数据
        datatitle: [],  //当页数据
        value4: '',
        aimg: img,
        dialogFormVisible: false,
        form: {
          pid: '',//上级
          name: '',//名称
          img: '',//
          sort: "",//排序
        },
        fentitle: '',
        formLabelWidth: '120px',
        options: [],
        classvalue: '',
        imgurl: '',
        gdid: 0,
        leavla: 0,
        submitbutton: true,
        imgarr: {},
        imgtext: "",
        rowindex: '',
        rowid: 0,
      }
    },
    methods: {
      handleClick(row){
        console.log(row);
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      addclass(e){  //选择一级分类 二级分类
        this.dialogFormVisible = true;
        switch (e) {
          case 1:
            this.fentitle = "添加一级分类";
            this.leavla = 1;
            this.classa = false;
            break;
          case 2:
            this.classa = true;
            this.fentitle = "添加二级分类";
            this.leavla = 2;
            break;
        }
      },
      updateclass(e, r){//修改分类
        this.update_class = true;
        var parent_id;
        switch (r) {
          case 1:
            parent_id = 0;
            break;
          case 2:
            parent_id = e.parent_id;
            break;
        }
        this.class_update.name = e.class_name;
        this.class_update.sort = 3; //需修改
        this.class_update.eid = e.id;
        this.class_update.pid = parent_id;
        this.class_update.level = r;
      },
      updateclassname(){ //确定修改分类
        this.http.post({
          'api': 'editgoodsclass',
          'data': {
            'data': {
              "id": this.class_update.eid,
              "parent_id": this.class_update.pid,
              "class_sort": this.class_update.sort,
              "level": this.class_update.level,
              "class_name": this.class_update.name,
            }
          }
        }).then((res) => {
          if (res.data.status_code == 200) {
            this.$h.dataSuccess(res.data,this);
          }
        }, (err) => {
          if (err) {
            this.$h.Ed(err,this);
          }
        })
      },
      deleteclass(e, i, id){//删除分类
        this.dateadvertisement = true;
        this.imgarr = e;
        this.imgtext = e.class_name;
        this.rowindex = i;
        this.rowid = id;
      },
      submitimg(){//确定删除
        this.http.post({
          'api': 'deletegoodsclass',
          'data': {
            'data': {
              "classid": this.imgarr.id
            }
          }
        }).then((res) => {
          if (res.data.status_code == 200) {
            this.$h.dataSuccess(res.data,this);
            this.dateadvertisement = false;
            switch (this.rowid) {
              case 1:
                this.datatitle.splice(this.rowindex, 1);
                break;
              case 2:
                this.bodyaudh();
                break;
            }
          }
        }, (err) => {
          if (err) {
            this.$h.Ed(err,this);
          }
        })
      },
      submitclass(){  //提交分类
        this.http.post({
          'api': 'creategoodsclass',
          'data': {
            'data': {
              "classname": this.form.name,
              "classsort": this.form.sort,
              "parentid": this.classvalue,
              "level": this.leavla,
            }
          }
        }).then((res) => {
          if (res.data.status_code == 200) {
            this.$h.dataSuccess(res.data,this);
            this.table_ = false;
            this.gdid = res.data.data.id;
            this.submitbutton = false
          }
        }, (err) => {
          if (err) {
            this.$h.Ed(err,this);
          }
        })
      },
      submitclassimg(){
        this.table_ = true;
        this.submitbutton = true;
        this.dialogFormVisible = true;
        this.update()
      },
      update(){
        this.dialogFormVisible = false;
        setTimeout(() => {
          var d = window.frames["id_iframe"];
          if (d) {
            var dataall = JSON.parse(d.document.getElementsByTagName('pre')[0].innerHTML);
            this.$h.dataSuccess(dataall,this);
            this.bodyaudh();
          } else {
            this.update();
          }
        }, 1000);
      },
      handleCurrentChange(val) { //分页
        this.cur = val;
        this.datatitle = this.Temporary.slice((val - 1) * this.pagesize, val * this.pagesize);
      },
      onFileChange(e) {
        var URL = window.URL || window.webkitURL;
        var imgURL = URL.createObjectURL(e.target.files[0]);
        var img_url = e.target;
        const isLt2M = img_url.files[0].size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('或者上传头像图片大小不能超过 2MB!');
        } else {
          this.aimg = imgURL;
        }
      },
      bodyaudh() {
        this.loading2 = true;
        this.http.post({
          'api': 'getgoodsclass',
          'data': {
            'data': {
            }
          }
        }).then((res) => {
          if (res.data.status_code == 200) {
            this.shuju(res.data.data)
          }
        }, (err) => {
          if (err) {
            this.$h.Ed(err,this);
          }
        })
      },
      shuju(dataall) {
        this.options = dataall;
        this.Temporary = dataall;
        this.loading2 = false;
        this.total = this.Temporary.length * 1; //数据总的条数
        this.currentPage4 = Math.ceil(this.total / this.pagesize); //总的条数 除 每页条数
        this.datatitle = this.Temporary.slice(0, this.pagesize);
      },
    },
    watch: {},
    computed: {
      //计算属性
    },
    mounted() {

      this.bodyaudh();

      //生命周期
    }
  }
</script>
<style scoped>
  /*.pic_css {*/
    /*height: 45%;*/
    /*width: 60%;*/
    /*margin-top: 15px;*/
  /*}*/

  /*.img_ {*/
    /*display: block;*/
    /*width: 53%;*/
    /*height: 37px;*/
    /*margin: auto;*/
  /*}*/
  .img_fenlei{
    display: block;
    width: 53%;
    height: 49px;
    margin: auto;
  }

  .ll_button {
    margin-left: 100%;
    width: 96px;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;

    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #409EFF;
    border-color: #409EFF;
  }

  .ll_input {

  }

  .classname {
    width: 300px;
  }

  .header_top {
    height: 80px;
    width: 100%;
  }

  .el_class {
    width: 70%;
    display: block;
    margin: auto;
  }

  .el_img {
    width: 200px;
    height: 200px;
    display: block;
    background-size: 100% 100%;
  }

  .pic_add {
    width: 200px;
    height: 200px;
    position: absolute;
    bottom: 00px;
    /*background: red;*/
    opacity: -1;
    z-index: 9999;
  }

  .allith2 {
    background: #090404;
    float: right;
    margin-top: 15px;
  }

  .height_gao {
    height: 100%;
  }

  .header_toptow {
    height: 40px;
    width: 100%;
  }

  .input_ {
    width: 60%;
    margin-top: 15px;
  }

  .subang {
    margin-left: 3%;
    margin-top: 15px;
    width: 95px;
  }

  .subangffefnlei {
    margin-left: 3%;
    margin-top: 15px;
    width: 126px;
  }


</style>
